{layout name="formlayout" /}
<div class="layui-form" lay-filter="zbc-user-permission-form" id="zbc-user-permission-form" style="padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" value="{$permission.name}" lay-verify="required" placeholder="请输入权限名称"
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-block">
            <input type="text" name="key" value="{$permission.key}" placeholder="请输入权限标识" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限类型</label>
        <div class="layui-input-block" id="radio">
            <input type="radio" lay-filter="zbc-user-permission-form-radio" name="type" value="0" title="目录" {if
                $permission.type==0} checked {/if}> <input type="radio" lay-filter="zbc-user-permission-form-radio"
                name="type" value="1" title="菜单" {if $permission.type==1} checked {/if}> <input type="radio"
                lay-filter="zbc-user-permission-form-radio" name="type" value="2" title="按钮" {if $permission.type==2}
                checked {/if}> </div> </div> <div class="layui-form-item layui-hide" id="pid">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-block">
                <select name="pid">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-hide" id="url">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" value="{$permission.url}" placeholder="请输入地址" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="order" value="{$permission.order}" placeholder="请输入排序" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" value="{$permission.id}">
            <input type="button" lay-submit lay-filter="zbc-user-permission-form-submit"
                id="zbc-user-permission-form-submit" value="确认">
        </div>
    </div>
    <script>
        layui.config({
            base: '/static/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form'], function () {
            var $ = layui.$
                , form = layui.form
                , admin = layui.admin;

            form.on('radio(zbc-user-permission-form-radio)', function (data) {
                var pid = '{$permission.pid}';
                if (data.value == 0) {
                    $("#url").addClass('layui-hide');
                    $("#pid").addClass('layui-hide');
                } else if (data.value == 1) {
                    $("#url").removeClass('layui-hide');
                    $("#pid").removeClass('layui-hide');
                    //加载目录数据
                    //如果是编辑需要绑定下选中数据
                    admin.req({
                        url: '/admin/permission/permissionsByLevel',
                        data: { level: 1 },
                        method: 'post',
                        success: function (result) {
                            if (result.code == 0) {
                                var html = "<option value=''>请选择</option>";
                                $.each(result.data, function (i, v) {
                                    if (pid && v.id == pid) {
                                        html += "<option value='" + v.id + "' selected>" + v.name + "</option>"
                                    } else {
                                        html += "<option value='" + v.id + "'>" + v.name + "</option>"
                                    }
                                })
                                $("select[name='pid']").html(html);
                                form.render('select')
                            }
                        }
                    })
                } else if (data.value == 2) {
                    $("#pid").removeClass('layui-hide');
                    $("#url").removeClass('layui-hide');
                    //加载菜单数据
                    admin.req({
                        url: '/admin/permission/permissionsByLevel',
                        data: { level: 2 },
                        method: 'post',
                        success: function (result) {
                            if (result.code == 0) {
                                var html = "<option value=''>请选择</option>";
                                $.each(result.data, function (i, v) {
                                    if (pid && v.id == pid) {
                                        html += "<option value='" + v.id + "' selected>" + v.name + "</option>"
                                    } else {
                                        html += "<option value='" + v.id + "'>" + v.name + "</option>"
                                    }
                                })
                                $("select[name='pid']").html(html);
                                form.render('select')
                            }
                        }
                    })
                }
            })

            $(function () {
                layui.event.call($("#radio input[type='radio']:checked"), 'form', 'radio(zbc-user-permission-form-radio)', {
                    elem: $("#radio input[type='radio']:checked")[0]
                    , value: $("#radio input[type='radio']:checked")[0].value
                    , othis: $("#radio input[type='radio']:checked")[0]
                })
            })

        })
    </script>